<template>
    <div class="wrap">
        <div
            v-for="(ele,i) in stepData"
            :key="i"
            class="wrap-step"
            :class="active===i?'active':'default'"
            :style="{width: styleParam['w']}"
        >
            <div class="wrap-step-li">
                <div class="wrap-step-radius">{{ ele['step'] }}</div>
                <div class="wrap-step-line" />
            </div>
            <div class="wrap-step-text">{{ ele['title'] }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        active: {
            type: Number,
            default: -1
        },
        stepData: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        styleParam() {
            let l = this.stepData.length
            let w = (100 / l).toFixed(2) + '%'
            return {w, l}
        }
    }
}
</script>

<style lang="scss" scoped>
.default {
    .wrap-step-radius,
    .wrap-step-line,
    .wrap-step-text {
        color: #d8d8d8;
        background-color: #d8d8d8;
    }
}
.active {
    .wrap-step-radius,
    .wrap-step-line,
    .wrap-step-text {
        color: #5a8bff;
        background-color: #5a8bff;
    }
}
.wrap {
    display: flex;
    &-step {
        font-size: 14px;
        user-select: none;
        text-align: center;
        &-li {
            width: 100%;
            display: flex;
            justify-content: center;
            position: relative;
        }
        &-radius {
            color: #fff !important;
            width: 24px;
            line-height: 24px;
            border-radius: 50%;
            z-index: 99;
        }
        &-text {
            margin-top: 8px;
            background-color: transparent !important;
        }
        &-line {
            height: 4px;
            left: 0;
            right: 0;
            position: absolute;
            @include position-center(y);
        }
    }
}
</style>
